// 文件上传时自动填充文件名和动态多级目录选择功能
document.addEventListener('DOMContentLoaded', function() {
    // 查找文件上传字段
    const fileInput = document.querySelector('input[type="file"]');
    const nameInput = document.querySelector('input[name="name"]');
    const dirInput = document.querySelector('input[name="upload_dir"]');
    
    if (fileInput && nameInput) {
        fileInput.addEventListener('change', function() {
            if (this.files.length > 0) {
                // 获取文件名（不包含路径）
                const fileName = this.files[0].name;
                // 自动填充到文件名字段
                nameInput.value = fileName;
            }
        });
    }
    
    // 动态加载目录列表
    if (dirInput) {
        // 创建目录选择界面
        const dirContainer = document.createElement('div');
        dirContainer.style.marginTop = '10px';
        dirContainer.innerHTML = `
            <label>选择现有目录:</label>
            <select id="dir_select" style="margin-left: 10px;">
                <option value="">根目录</option>
            </select>
            <button type="button" id="refresh_dirs" style="margin-left: 10px;">刷新目录列表</button>
            <br><br>
            <label>或直接输入目录路径:</label>
            <input type="text" id="new_dir_name" placeholder="输入目录路径(支持多级,如:文档/2024/图片)" style="margin-left: 10px; width: 300px;">
            <button type="button" id="add_new_dir" style="margin-left: 10px;">应用目录</button>
            <button type="button" id="create_dir" style="margin-left: 10px; background-color: #28a745; color: white;">创建目录</button>
        `;
        dirInput.parentNode.appendChild(dirContainer);
        
        const dirSelect = document.getElementById('dir_select');
        
        // 加载目录列表
        loadDirectories();
        
        // 目录选择事件
        dirSelect.addEventListener('change', function() {
            dirInput.value = this.value;
        });
        
        // 添加目录的事件处理
        document.getElementById('add_new_dir').addEventListener('click', function() {
            const newDirName = document.getElementById('new_dir_name').value.trim();
            if (newDirName) {
                dirInput.value = newDirName;
                // 清空输入框
                document.getElementById('new_dir_name').value = '';
                
                alert('目录路径 ' + newDirName + ' 已设置，保存时会自动创建该目录。');
            }
        });
        
        // 创建目录的事件处理
        document.getElementById('create_dir').addEventListener('click', function() {
            const newDirName = document.getElementById('new_dir_name').value.trim();
            if (!newDirName) {
                alert('请输入要创建的目录路径');
                return;
            }
            
            // 发送创建目录的 AJAX 请求
            const formData = new FormData();
            formData.append('dir_path', newDirName);
            
            fetch('/admin/file_manager/file/create_directory/', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': getCookie('csrftoken')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    // 清空输入框
                    document.getElementById('new_dir_name').value = '';
                    // 刷新目录列表
                    loadDirectories();
                } else {
                    alert('创建目录失败: ' + data.error);
                }
            })
            .catch(error => {
                console.error('创建目录失败:', error);
                alert('创建目录失败，请重试');
            });
        });
        
        // 刷新目录列表的事件处理
        document.getElementById('refresh_dirs').addEventListener('click', function() {
            loadDirectories();
        });
    }
    
    // ========== 文件上传进度条与AJAX上传 ===========
    const uploadForm = document.getElementById('uploadForm');
    // 这里去掉重复声明，直接复用顶部的fileInput
    const progressContainer = document.getElementById('progressContainer');
    if (uploadForm && fileInput && progressContainer) {
        uploadForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const files = fileInput.files;
            const path = uploadForm.querySelector('input[name="path"]').value;
            if (!files.length) {
                alert('请选择文件');
                return;
            }
            progressContainer.innerHTML = '';
            let completed = 0;
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                // 创建进度条
                const progressBarWrapper = document.createElement('div');
                progressBarWrapper.style.margin = '8px 0';
                const label = document.createElement('span');
                label.textContent = file.name + ': ';
                const progressBar = document.createElement('progress');
                progressBar.max = 100;
                progressBar.value = 0;
                progressBar.style.width = '300px';
                progressBarWrapper.appendChild(label);
                progressBarWrapper.appendChild(progressBar);
                progressContainer.appendChild(progressBarWrapper);
                // 构造FormData
                const formData = new FormData();
                formData.append('files', file);
                formData.append('path', path);
                // CSRF
                const csrfToken = uploadForm.querySelector('input[name="csrfmiddlewaretoken"]').value;
                // AJAX上传
                const xhr = new XMLHttpRequest();
                xhr.open('POST', window.location.pathname, true);
                xhr.setRequestHeader('X-CSRFToken', csrfToken);
                xhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        const percent = Math.round((e.loaded / e.total) * 100);
                        progressBar.value = percent;
                    }
                });
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            progressBar.value = 100;
                            label.textContent = file.name + ': 上传完成';
                        } else {
                            label.textContent = file.name + ': 上传失败';
                            progressBar.value = 0;
                        }
                        completed++;
                        if (completed === files.length) {
                            // 全部上传完毕后刷新页面或弹窗
                            setTimeout(function() { location.reload(); }, 1000);
                        }
                    }
                };
                xhr.send(formData);
            }
        });
    }
    
    // 获取 Cookie 值的函数
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    
    // 格式化目录名称显示（添加缩进）
    function formatDirectoryName(dirPath) {
        const parts = dirPath.split('/');
        const indent = ' '.repeat(parts.length - 1); // 使用半角空格缩进
        return indent + parts[parts.length - 1];
    }
    
    // 动态加载目录列表的函数
    function loadDirectories() {
        const dirSelect = document.getElementById('dir_select');
        if (!dirSelect) return;
        
        // 获取当前选中的值
        const currentValue = dirSelect.value;
        
        // 清空现有选项（保留根目录选项）
        dirSelect.innerHTML = '<option value="">根目录</option>';
        
        // 发送 AJAX 请求获取目录列表
        fetch('/admin/file_manager/file/get_directories/')
            .then(response => response.json())
            .then(data => {
                // 添加目录选项
                data.directories.forEach(dir => {
                    const option = document.createElement('option');
                    option.value = dir;
                    option.textContent = formatDirectoryName(dir);
                    dirSelect.appendChild(option);
                });
                
                // 恢复之前选中的值
                if (currentValue) {
                    dirSelect.value = currentValue;
                }
            })
            .catch(error => {
                console.error('获取目录列表失败:', error);
                alert('获取目录列表失败，请刷新页面重试');
            });
    }
}); 